<!--<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
  		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<!--bootstrap-->
		<link rel="stylesheet" href="plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
		<!--normalize-->
		<link rel="stylesheet" href="plugins/Normalize/normalize.min.css" />
		<!--highlight-->
		<link rel="stylesheet" href="plugins/highlight/default.min.css" />
		<!--自定义CSS-->
		<link rel="stylesheet" href="css/oj.main.css" />
		<link rel="stylesheet" href="css/oj.student.css" />
		<!--jQuery-->
		<script type="text/javascript" src="plugins/jQuery/jquery-3.2.1.min.js" ></script>
        <title>QOJ - 学生主页</title>
    </head>
    <body>
    	<nav class="navbar navbar-inverse navbar-fixed-top">
    		<div class="container-fluid">
    			<div class="navbar-header">
    				<button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#navbar-menu">
    					<span class="icon-bar"></span>
    					<span class="icon-bar"></span>
    					<span class="icon-bar"></span>
    				</button>
    				<a href="student.jsp" class="navbar-brand">Q · O J</a>
    			</div>
    			
    			<div class="collapse navbar-collapse">
    				<ul class="nav navbar-nav navbar-left">
    					<li id="sidebar-close"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
    					<li>
    						<div class="navbar-form">
    							<div class="form-group">
    								<input type="text" class="form-control" id="navbar-search-problem-name" placeholder="题目搜索" />
    							</div>
    							<button type="button" class="btn btn-default" id="navbar-search-problem">
    								<span class="glyphicon glyphicon-search"></span>
    							</button>
    						</div>
    					</li>
    				</ul>
    				<ul class="nav navbar-nav navbar-right">
    					<li><a href="#modal-user-info" id="navbar-user"  data-toggle="modal">zstarshadow</a></li>
    					<li><a href="#" id="signout-enter">退出登陆</a></li>
    				</ul>
    			</div>
    		</div>
    	</nav>
    	
    	<div class="sidebar" id="sidebar">
    		<nav>
    			<ul class="nav nav-pills nav-stacked">
    				<li id="navbar-home" class="active"><a href="#home" data-toggle="tab">主页</a></li>
    				<li id="navbar-training"><a href="#training" data-toggle="tab">训练</a></li>
    				<li id="navbar-task"><a href="#task" data-toggle="tab">作业</a></li>
    				<li id="navbar-match"><a href="#match" data-toggle="tab">比赛</a></li>
    				<li id="navbar-ladder"><a href="#ladder" data-toggle="tab">天梯</a></li>
    				<li id="navbar-review"><a href="#review" data-toggle="tab">评测</a></li>
    			</ul>
    		</nav>
    	</div>
    	
    	<!--测试代码-->
    	<a href="#task-detail" data-toggle="tab">测试</a>
    	
    	<!--modal用户信息-->
    	<!--student.modalUserInfo.jsp-->
    	<div class="modal fade" id="modal-user-info" tabindex="-1">
    		<div class="modal-dialog modal-content">
    			<div class="modal-body">
    				<button type="button" class="close" data-dismiss="modal">&times;</button>
    				<ul class="nav nav-tabs">
    					<li class="active"><a href="#tab-user-info" data-toggle="tab">用户信息</a></li>
    					<li id="modal-user-secure"><a href="#tab-user-secure" data-toggle="tab">用户安全</a></li>
    				</ul>
    				<div class="tab-content">
    					<!--用户信息-->
    					<div class="tab-pane active" id="tab-user-info">
    						<div id="alert-user-info"></div>
    						<div class="input-group">
    							<span class="input-group-addon">昵称: </span>
    							<input type="text" class="form-control" id="update-user-nickname"/>
    							<span class="input-group-addon">签名: </span>
    							<input type="text" class="form-control" id="update-user-signature"/>
    						</div>
    						<div class="input-group">
    							<span class="input-group-addon">姓名: </span>
    							<input type="text" class="form-control" id="update-user-name"/>
    							<span class="input-group-btn" id="update-user-sex" data-toggle="buttons">
    								<label class="btn btn-default">男<input type="radio"/></label>
    								<label class="btn btn-default">女<input type="radio"/></label>
    							</span>
    						</div>
    						<div class="input-group">
    							<span class="input-group-addon">学号: </span>
    							<input type="text" class="form-control" id="update-user-ID"/>
    							<span class="input-group-btn" data-toggle="buttons">
    								<button type="button" class="btn btn-default" id="update-user-school">请选择学校</button>
    								<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    									<span class="caret"></span>
    								</button>
    								<ul class="dropdown-menu" id="user-list-school"></ul>
    							</span>
    							<span class="input-group-btn" data-toggle="buttons">
    								<button type="button" class="btn btn-default" id="update-user-class">请选择班级</button>
    								<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    									<span class="caret"></span>
    								</button>
    								<ul class="dropdown-menu" id="user-list-class"></ul>
    							</span>
    						</div>
    						<div class="input-group">
    							<span class="input-group-addon">邮箱: </span>
    							<input type="text" class="form-control" id="update-user-email"/>
   							</div>
   							<button type="button" class="btn btn-primary" id="update-user-info">保存</button>
    					</div>
    					<!--用户安全-->
    					<div class="tab-pane" id="tab-user-secure">
    						<div id="alert-user-secure"></div>
    						<ul class="list-group">
  								<li class="list-group-item">
  									<input type="password" id="update-user-password" class="form-control" placeholder="新密码" autofocus>
  								</li>
  								<li class="list-group-item">
  									<input type="password" id="update-user-password-check" class="form-control" placeholder="再次输入">
  								</li>
							</ul>
   							<button type="button" class="btn btn-primary" id="update-user-secure">保存</button>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    	
    	<div class="container-fluid" id="student-content">
    		<div class="tab-content">
    			<!--主页-->
    			<div class="tab-pane" id="home">
    				<div class="tab-pane active" id=""></div>
    			</div>
    			<!--训练-->
    			<div class="tab-pane" id="training">
    				<div class="tab-content">
    					<div class="tab-pane active" id="training-home">
    						<!--题目查找-->
    						<div class="panel panel-default" id="problem-search">
    							<div class="panel-heading">
    								<h1>训练</h1>
    							</div>
    							<div class="panel-body">
    								<div id="alert-problem-search"></div>
    								<div class="btn-group" id="training-problem-option" data-toggle="buttons">
  		  								<label class="btn btn-default active">全部<input type="radio"/></label>
    									<label class="btn btn-default">智能推荐<input type="radio"/></label>
    									<label class="btn btn-default">已经AC的题<input type="radio"/></label>
    									<label class="btn btn-default">尚未AC的题<input type="radio"/></label>
    								</div>
    								<div class="input-group">
 		   							<input type="text" class="form-control" id="search-problem-ID" placeholder="请输入题目ID或题目名（默认显示全部题目列表）"/>
    									<span class="input-group-btn">
    										<button type="button" class="btn btn-default" id="search-problem-enter">
    											<span class="glyphicon glyphicon-search"></span>
    										</button>
    									</span>
    								</div>
    								<table class="table table-hover table-striped">
   			 							<!--ID、题目名、类型、 知识点、难度、状态（没做过、没做玩、AC、WA、TLE、MLE）-->
    									<thead><tr><th>ID</th><th>题目名</th><th>类型</th><th>知识点</th><th>难度</th><th>状态</th></tr></thead>
    									<tbody id="table-problem-list">
											<tr data-toggle="tab" data-target="#training-problem"><td>10001</td><td>10001</td><td>ACM</td><td>DP</td><td>王者</td><td>AC</td></tr>
    									</tbody>
    								</table>
    								<ul id="problem-paginator"></ul>
    							</div>
    						</div>
    					</div>
    					<div class="tab-pane" id="training-problem">
    						<a href="#training-home" class="btn btn-default" data-toggle="tab">返回题库列表</a>
    						<div class="panel panel-default">
    							<div class="panel-heading">
    								<h1 id="training-problem-title">10001</h1>
    								<h5>来源：<span id="training-problem-source"></span></h5>
    								<h5>时间限制：<span id="training-problem-limit-time"></span></h5>
    								<h5>内存限制：<span id="training-problem-limit-memory"></span></h5>
    							</div>
    							<div class="panel-body">
    								<div class="panel panel-default">
    									<div class="panel-heading">题目描述</div>
    									<div class="panel-body">
    										<pre id="training-problem-description"></pre>
    									</div>
    								</div>
    								<div class="panel panel-default">
    									<div class="panel-heading">输入描述</div>
    									<div class="panel-body">
    										<pre id="training-problem-description-in"></pre>
    									</div>
    								</div>
    								<div class="panel panel-default">
    									<div class="panel-heading">输出描述</div>
    									<div class="panel-body">
    										<pre id="training-problem-description-out"></pre>
    									</div>
    								</div>
    								<div class="panel panel-default">
    									<div class="panel-heading">输入样例</div>
    									<div class="panel-body">
    										<pre id="training-problem-sample-in"></pre>
    									</div>
    								</div>
    								<div class="panel panel-default">
    									<div class="panel-heading">输出样例</div>
    									<div class="panel-body">
    										<pre id="training-problem-sample-out"></pre>
    									</div>
    								</div>
    								<div class="panel panel-default">
    									<div class="panel-heading">数据范围 & 提示</div>
    									<div class="panel-body">
    										<pre id="training-problem-tip"></pre>
    									</div>
    								</div>
    								<div class="panel panel-default">
    									<div class="panel-body">
    										<div id="alert-training-problem"></div>
    										<div class="btn-group" id="training-problem-option" data-toggle="buttons">
  		  										<label class="btn btn-default active">C++<input type="radio"/></label>
    											<label class="btn btn-default">C<input type="radio"/></label>
    											<label class="btn btn-default">Java<input type="radio"/></label>
    										</div>
    										<textarea class="form-control" id="training-problem-code"></textarea>
    										<button type="button" class="btn btn-primary" id="training-problem-submit">提交代码</button>
    									</div>
    								</div>
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>
    			<!--作业-->
    			<div class="tab-pane" id="task">
    				<div class="tab-content">
     					<div class="tab-pane active" id="task-home">
    						<!--作业查找-->
    						<div class="panel panel-default" id="task-search">
    							<div class="panel-heading">
    								<h1>已布置的作业</h1>
    							</div>
    							<div class="panel-body">
    								<div id="alert-task-search"></div>
    								<div class="input-group">
    									<input type="text" class="form-control" id="search-task-ID" placeholder="请输入作业ID或作业名（默认显示全部作业列表）"/>
    									<span class="input-group-btn">
    										<button type="button" class="btn btn-default" id="search-task-enter">
    											<span class="glyphicon glyphicon-search"></span>
    										</button>
    									</span>
    								</div>
    								<table class="table table-hover table-striped">
    									<thead><tr><th>ID</th><th>创建人</th><th>开始时间</th><th>结束时间</th><th>状态</th></tr></thead>
    									<tbody id="table-task-list">
											<tr data-toggle="tab" data-target="#task-detail"><td>10001</td><td>temp</td><td>2017-7-21</td><td>2017-7-22</td><td>正在进行</td></tr>
    									</tbody>
    								</table>
    								<ul id="task-paginator"></ul>
    							</div>
    						</div>
    					</div>
    					<div class="tab-pane" id="task-detail">
    						<a href="#task-home" class="btn btn-default" data-toggle="tab">返回作业列表</a>
    						<div class="panel panel-default">
    							<div class="panel-heading">
    								<h1 class="task-detail-title">作业10001</h1>
    								<h4 class="task-detail-description">描述：测试内容</h4>
    								<h5>进行时间：<span class="task-detail-time-start">2017/7/20 </span> -> <span class="task-detail-time-end"> 2017/7/21</span></h5>
    							</div>
    							<div class="panel-body">
    								<table class="table table-hover table-striped">
   			 							<!--ID、题目名、类型、 知识点、难度、状态-->
    									<thead><tr><th>ID</th><th>题目名</th><th>类型</th><th>知识点</th><th>难度</th><th>状态</th></tr></thead>
    									<tbody id="table-problem-list">
											<tr data-toggle="tab" data-target="#task-problem"><td>10001</td><td>10001</td><td>ACM</td><td>DP</td><td>王者</td><td>AC</td></tr>
    									</tbody>
    								</table>
    							</div>
    						</div>
    					</div>
    					<div class="tab-pane" id="task-problem">
    						<a href="#task-detail" class="btn btn-default" data-toggle="tab">返回题目列表</a>
    						<div class="panel panel-default">
    							<div class="panel-heading">
    								<h1 id="task-problem-title">10001</h1>
    								<h5>来源：<span id="task-problem-source"></span></h5>
    								<h5>时间限制：<span id="task-problem-limit-time"></span></h5>
    								<h5>内存限制：<span id="task-problem-limit-memory"></span></h5>
    							</div>
    							<div class="panel-body">
    								<div class="panel panel-default">
    									<div class="panel-heading">题目描述</div>
    									<div class="panel-body">
    										<pre id="task-problem-description"></pre>
    									</div>
    								</div>
    								<div class="panel panel-default">
    									<div class="panel-heading">输入描述</div>
    									<div class="panel-body">
    										<pre id="task-problem-description-in"></pre>
    									</div>
    								</div>
    								<div class="panel panel-default">
    									<div class="panel-heading">输出描述</div>
    									<div class="panel-body">
    										<pre id="task-problem-description-out"></pre>
    									</div>
    								</div>
    								<div class="panel panel-default">
    									<div class="panel-heading">输入样例</div>
    									<div class="panel-body">
    										<pre id="task-problem-sample-in"></pre>
    									</div>
    								</div>
    								<div class="panel panel-default">
    									<div class="panel-heading">输出样例</div>
    									<div class="panel-body">
    										<pre id="task-problem-sample-out"></pre>
    									</div>
    								</div>
    								<div class="panel panel-default">
    									<div class="panel-heading">数据范围 & 提示</div>
    									<div class="panel-body">
    										<pre id="task-problem-tip"></pre>
    									</div>
    								</div>
    								<div class="panel panel-default">
    									<div class="panel-body">
    										<div id="alert-training-problem"></div>
    										<div class="btn-group" id="task-problem-option" data-toggle="buttons">
  		  										<label class="btn btn-default active">C++<input type="radio"/></label>
    											<label class="btn btn-default">C<input type="radio"/></label>
    											<label class="btn btn-default">Java<input type="radio"/></label>
    										</div>
    										<textarea class="form-control" id="task-problem-code"></textarea>
    										<button type="button" class="btn btn-primary" id="task-problem-submit">提交代码</button>
    									</div>
    								</div>
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>
    			<!--比赛-->
    			<div class="tab-pane" id="match">
    				<div class="tab-content">
    					<div class="tab-pane active" id="match-home">
    						<!--比赛查找-->
    						<div class="panel panel-default" id="match-search">
    							<div class="panel-heading">
    								<h1>已创建的比赛</h1>
    							</div>
    							<div class="panel-body">
    								<div id="alert-match-search"></div>
    								<div class="input-group">
    									<input type="text" class="form-control" id="search-match-ID" placeholder="请输入比赛ID或赛名（默认显示全部比赛列表）"/>
    									<span class="input-group-btn">
    										<button type="button" class="btn btn-default" id="search-match-enter">
    											<span class="glyphicon glyphicon-search"></span>
    										</button>
    									</span>
    								</div>
    								<table class="table table-hover table-striped">
    									<thead><tr><th>ID</th><th>创建人</th><th>开始时间</th><th>结束时间</th><th>状态</th></tr></thead>
    									<tbody id="table-match-list">
											<tr data-toggle="tab" data-target="#match-detail"><td>10001</td><td>temp</td><td>2017-7-21</td><td>2017-7-22</td><td>正在进行</td></tr>
    									</tbody>
    								</table>
    								<ul id="match-paginator"></ul>
    							</div>
		    				</div>
    					</div>
    					<div class="tab-pane" id="match-detail">
    						<a href="#match-home" class="btn btn-default" data-toggle="tab">返回比赛列表</a>
    						<div class="panel panel-default">
    							<div class="panel-heading">
    								<h1 id="match-title">比赛10001</h1>
    								<h4 class="task-detail-description">描述：测试内容</h4>
    								<h5>进行时间：<span class="task-detail-time-start">2017/7/20 </span> -> <span class="task-detail-time-end"> 2017/7/22</span></h5>
    							</div>
    							<div class="panel-body">
    								<a href="match.jsp" class="btn btn-primary">进入比赛</a>
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>
    			<div class="tab-pane" id="ladder">
    				<div class="panel panel-default">
						<div class="panel-heading">
							<h1>天梯排名</h1>
						</div>
						<div class="panel-body">
							<div>我的当前排名：<div id="rank-me"></div></div>
							<table class="table table-hover table-striped">
								<tbody id="rank-table-ladder">
									<!--排名、用户名、个性签名、经验值-->
									<tr><td style="text-align: center;">暂无排名</td></tr>
								</tbody>
							</table>
							<ul id="rank-table-paginator"></ul>
						</div>
					</div>
    			</div>
    			<div class="tab-pane" id="review">
    				<div class="panel panel-default">
						<div class="panel-heading">
							<h1>即时评测列表</h1>
						</div>
						<div class="panel-body">
							<table class="table table-hover table-striped">
								<tbody id="review-table">
									<!--题目名、状态、用户名、时间-->
									<tr><td style="text-align: center;">暂无题目评测</td></tr>
								</tbody>
							</table>
							<ul id="review-table-paginator"></ul>
						</div>
    				</div>
    			</div>
    		</div>
    	</div>
    	
    	<!--bootstrap-->
    	<script type="text/javascript" src="plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
    	<!--bootstrap-paginator-->
    	<script type="text/javascript" src="plugins/bootstrap-paginator/bootstrap-paginator.min.js" ></script>
    	<!--highcharts-->
    	<script type="text/javascript" src="plugins/Highcharts/highcharts.js" ></script>
    	<!--highlight-->
    	<script type="text/javascript" src="plugins/highlight/highlight.min.js" ></script>
    	<!--自定义JS-->
    	<script type="text/javascript" src="js/oj.main.js" ></script>
    	<script type="text/javascript" src="js/oj.student.js" ></script>
 	</body>
</html>